<template>
    <el-container>
        <el-header style="background-color: #409EFF;height: 77px">
            <el-col :span="12" style="text-align: left">
                <h2 style="font-size: x-large;margin-top: 30px;margin-left: 30px;color: #FFFF">企业标准信息公共服务平台</h2>
            </el-col>
            <div style="font-size: 12px;">
                <el-col :span="12">
                    <div class="grid-content bg-purple" style="margin-top: 30px;margin-left: 150px;text-align: center">
                        <i class="el-icon-s-help" style="color: #FFFF">{{'\u00a0'}}</i>
                        <el-link type="primary" style="font-size: 12px;"><a href="/" style="color: #FFFF;">帮助中心</a>
                        </el-link>&nbsp;&nbsp;
                        <el-divider direction="vertical"></el-divider>
                        <i class="el-icon-s-home" style="color: #FFFF">{{'\u00a0'}}</i>
                        <el-link type="primary" style="font-size: 12px;"><a href="/" style="color: #FFFF;">回到首页</a>
                        </el-link>
                    </div>
                </el-col>
            </div>

        </el-header>
        <div>
            <div class="line"></div>
            <el-menu
                    router
                    class="el-menu-demo"
                    mode="horizontal"
                    background-color="#909399"
                    text-color="#fff"
                    active-text-color="#ffd04b">
                <el-menu-item class="el-col-3" style="text-align: center" index="/user/ad" key="1">首页</el-menu-item>
                <el-menu-item class="el-col-3" style="text-align: center" index="/user/ques">问卷中心</el-menu-item>
                <el-menu-item class="el-col-3" style="text-align: center" index="/user/remake">REMAKE</el-menu-item>
                <el-submenu index="1" class="submenu">
                    <!-- <template slot="title">{{user.userRealName}}</template> -->
                    <template slot="title" >超级管理员</template>
                    <el-menu-item index="/user/setting">设置</el-menu-item>
                    <el-menu-item index="/user/myInfo">个人中心</el-menu-item>
                    <el-menu-item index="/user/message">我的消息</el-menu-item>
                    <el-menu-item @click="exit()">退出</el-menu-item>
                </el-submenu>
            </el-menu>
        </div>
        <el-container>
            <el-main clss="index-main" style="height: 660px;">
                <router-view></router-view>
            </el-main>
        </el-container>
    </el-container>
</template>
<script>
    // 导入组件
    export default {
        name: 'home',
        data() {
            return {
                url: 'ad',
                showclass: 'asideshow',
                showtype: false
            }
        },
        // 注册组件
        components: {},
        methods: {
            exit() {
                this.$confirm('退出登录, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    setTimeout(() => {
                        this.$store.commit('logout', 'false');
                        this.$router.push({path: '/'});
                        this.$message({
                            type: 'success',
                            message: '已退出登录!'
                        })
                    }, 1000)
                })
                    .catch(() => {
                    })
            },
            created() {},
            beforeUpdate() {
            },
            // 挂载前状态
            beforeMount() {
                // 弹出登录成功
                this.$message({
                    message: '登录成功',
                    type: 'success'
                })
            }
        }
    }
</script>
<style>

    .index-con {
        height: 100%;
        width: 100%;
        box-sizing: border-box;
    }

    .aside {
        width: 64px !important;
        height: 100%;
        background-color: #334157;
        margin: 0px;
    }

    .asideshow {
        width: 240px !important;
        height: 100%;
        background-color: #334157;
        margin: 0;
    }

    .index-header,
    .el-main {
        padding: 0;
    }

    .el-icon-s-home:before {
        font-size: 20px;

    }

    .el-icon-s-help:before {
        font-size: 20px;
    }

    a {
        text-decoration: none;
        font-size: 14px;
        display: block;
        width: auto;
        color: #ffff;
    }
</style>
